<template>
  <div class="header">
    <a @click="city">{{iscity}}></a>
    <a href="#">
      <span>HG</span> |
      <input
        type="text"
        placeholder="请输入搜索关键词"
        @focus="$router.push('/search')"
      />
    </a>
    <!-- <a href="#" @click="$router.push('/login')">登录</a> -->
    <router-link to="/login">登录</router-link>
   
  
  </div>
</template>

<script>
import Vue from "vue";
import { IndexBar, IndexAnchor, Overlay } from "vant";


Vue.use(IndexBar);
Vue.use(IndexAnchor);
Vue.use(Overlay);
export default {
  data() {
    return {
    iscity:localStorage.getItem('city')
    };
  },
  methods: {
    city() {
      this.$router.push('/city')
    },
  },
};
</script>

<style scoped>
.box .header a:nth-child(1),
.box .header a:nth-child(3) {
  color: azure;
  text-decoration: none;
}
.box .header a:nth-child(2) {
  width: 2.5rem;
  background-color: azure;
  border-radius: 0.3rem;
  padding: 0 0 0 0.3rem;
  line-height: 0.3rem;
  height: 0.3rem;
  color: rgb(51, 47, 48);
  font-size: 600;
}
.box .header a:nth-child(2) span {
  color: rgb(244, 15, 15);
  display: inline-block;
  font-size: 20px;
  font-weight: 700;
  font-family:'Trebuchet MS', sans-serif;
}
.box .header a:nth-child(2) input {
  width: 1.5rem;
  outline: none;
  border: none;
  height: 0.2rem;
  font-size: 14px;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.block {
  width: 3rem;
  background-color: #fff;
}
</style>